<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1862893_fjxwtwcsh3o.css">
</head>
<div id="section1" class="section1">
    <div class="container">
        <h1>Hi,我叫陈钰川</h1>
        <p>计算机专业数字媒体二班的一名大三学生</p>
    </div>
    <div class="contactme"><p><a href="#section5"><i class="iconfont icon-lianxi"></i>联系方式</a></p></div>
    <div class="header-class">
        <span>武</span>
        <span>汉</span>
        <span>工</span>
        <span>程</span>
        <span>大</span>
        <span>学</span>
    </div>
    <ul>
        <li class="dropdown">
            <div class="profile">
                <div class="personal"></div>
                <div><a href="#">陈钰川</a></div>
            </div>
            <ul class="drop-list">
                <a href="#section1">
                    <li>首页</li>
                </a>
                <a href="#section2">
                    <li>关于我</li>
                </a>
                <a href="#section6">
                    <li>技能</li>
                </a>
                <a href="#section3">
                    <li>项目</li>
                </a>
                <a href="#section4">
                    <li>爱好</li>
                </a>
                <a href="#section5">
                    <li>联系我</li>
                </a>
            </ul>
        </li>
        </ul>
    
</div>
<div class="nav" id="nav">
    <ul>
        <li><a href="#section1">首页</a></li>
        <li><a href="#section2">关于我</a></li>
        <li><a href="#section6">技能</a></li>
        <li><a href="#section3">项目</a></li>
        
        <li><a href="#section4">爱好</a></li>
        <li><a href="#section5">联系我</a></li>
    </ul>
</div>
<div id="section2" class="section2">
    <div class="section2-header">
        <h2>关于我</h2>
    </div>
    <div class="content">
        <div class="content-first">
            <i class="iconfont icon-nianling-copy"></i>
            <p>21岁</p>
        </div>
        <div class="content-second">
            <i class="iconfont icon-smileface-copy"></i>
            <p>开朗向上</p>
        </div>
        <div class="content-third">
            <i class="iconfont icon-Group-copy"></i>
            <p>河北省邢台市</p>
        </div>
    </div>
    <div class="main">
        <p>我叫陈钰川，今年21岁，来自河北省邢台市，双子座，是武汉工程大学计算机学院数字媒体专业的一名大三生。本人性格开朗，阳光向上，遇事不放弃，喜欢尝试新事物。积极参加团体活动，大学期间积极参加活动，
            培养了团队精神和管理能力。有很强的自控力，自己分内的事情必定会坚持做到最后，不怕犯错，只怕轻言放弃。
        </p>
    </br>
</br>
        <P>在实习期间,每天准时进行工作，按时完成各项任务，不拖不欠，且部分优秀。短期的实习，让我学会了很多东西，专业技能以及工作经验都有了一定程度的提升。
同时也为以后的实习和工作打下了坚实的基础。
        </P>
    </div>

</div>

<div id="section6" class="section6">
  <div class="section6-header">
      <h2>技能</h2>
      <p>实习后自身的各项技能掌握</p>
  </div>
  <div class="skills">
      <ul>
          <li>
              <h4>HTML5/CSS3</h4>
              <span class="max"></span>
              <span class="htmlcss"></span>
          </li>
          <li>
              <h4>JavaScript</h4>
              <span class="max"></span>
              <span class="js"></span>
          </li>
          <li>
              <h4>Vue.js</h4>
              <span class="max"></span>
              <span class="vue"></span>
          </li>
          <li>
              <h4>微信小程序</h4>
              <span class="max"></span>
              <span class="small"></span>
          </li>
          <li>
              <h4>其他技能<h4>
                  <span class="max"></span>
                  <span class="else"></span>
          </li>
      </ul>
  </div>
</div>
<div id="section3" class="section3">
    <div class="section3-header">
        <h2>项目</h2>
        <p>实习期间所作的部分项目作品</p>
    </div>
    <div class="item">
        <div class="item-container">
                <p>家居医生</p>
            <a href="https://chenyuchuan0621.gitee.io/chenyuchuan609/"><img src="./images/jiayuyisheng.jpg"></a>
        </div>
        <div class="item-container">
            <p>木兮地板</p>
            <a href="https://chenyuchuan0621.gitee.io/chenyuchuan0612/"><img src="./images/muxi.jpg"></a>
        </div>
        <div class="item-container">
            <p>小米主页</p>
            <a href="https://chenyuchuan0621.gitee.io/chenyuchuan0617/"><img src="./images/xiaomizhuye.jpg" alt=""></a>
        </div>
        <div class="item-container">
            <p>家居商品</p>
            <a href="https://chenyuchuan0621.gitee.io/chenyuchuan0626/"><img src="./images/jiaju.jpg" alt=""></a>
        </div>
    </div>
</div>
<div id="section4" class="section4">
    <div class="section4-header">
        <h2>爱好</h2>
        <p>日常生活中的个人爱好</p>
    </div>
    <div class="hobby">
        <div class="hobby-container"><img src="./images/03.jpg" alt="">
        <p class="p1"><span>跳舞是我的爱好之一</br>从中可以体会到坚持的感觉</span></p>
        </div>
        <div class="hobby-container"><img src="./images/04.jpg" alt="">
        <p class="p2"><span>玩游戏可以让我感到身心放松</br>闲暇之余玩游戏也是不错的消遣方式</span></p>
        </div>
        <div class="hobby-container"><img src="./images/05.jpg" alt="">
        <p class="p3"><span>KTV也是我一大乐趣</br>跟朋友一起去放声唱歌让我感到放松</span></p>
        </div>
    </div>
</div>
<div id="section5" class="section5">
    <div class="section5-header">
        <h2>联系我</h2>
        <p>欢迎与我建立联系</p>
    </div>
    <div class="contact">
            <a class="contact-icon" href="">
                <i class="iconfont icon-QQ" class="qq"></i>
                <img src="./images/qq.png" alt="" class="qq-code">
            </a>
            <a class="contact-icon" href="">
                <i class="iconfont icon-weixin1" class="weixin"></i>
                <img src="./images/weixin.png" alt="" class="weixin-code">
            </a>
            <a class="contact-icon" href="mailto:912194751@qq.com">
                <i class="iconfont icon-bianzu10"></i>
            </a>
            <a class="contact-icon" href="https://gitee.com/chenyuchuan0621">
                <i class="iconfont icon-mao"></i>
            </a>
            <a class="contact-icon" href="https://weibo.com/u/5589787958">
                <i class="iconfont icon-iconfontweibo"></i>
            </a>            
    </div>
        <div class="footer">
            <a href="https://weibo.com/u/5589787958">微博</a>丨
            <a href="https://gitee.com/chenyuchuan0621">github</a>丨
            <a href="https://tieba.baidu.com/home/main?un=%E9%80%90%E8%AF%A4&ie=utf-8&id=tb.1.f3658513.XBseXK6oUBZyb-vhxusL8A?t=1580437227&fr=pb">贴吧</a>丨
            <a href="">知乎</a>
            <br>
            <br>
            
            <a href="#section1">首页</a>
            <a href="#section2">关于我</a>
            <a href="#section6">技能</a>
            <a href="#section3">项目</a>
            <a href="#section4">爱好</a>
            <a href="#section5">联系我</a>
        </div>
       <div class="others">
           <a href="https://hanyaner.gitee.io/homework_last"><i class="iconfont icon-re"></i>更多web前端工程师简历</a>
       </div>
</div>
<script>
    /*导航条点击*/
    var navElements = document.querySelectorAll(".nav ul li");
    navElements.forEach( navItem =>{
        navItem.addEventListener("click",(e)=>{
            navElements.forEach( _navItem =>{
                _navItem.classList.remove("nav-active")
            })
            navItem.classList.add("nav-active")
        })
    })
    
    /* 滚动导航栏改变active */
    function scrollChangeNav(nav,element){
        let navNodes = document.querySelectorAll(nav)
        let elements = document.querySelectorAll(element)
        console.log(navNodes)
        console.log(elements)
        window.onscroll = ()=>{
            elements.forEach((ele, index)=>{
                let top = ele.getClientRects()[0].top
                let height = ele.getClientRects()[0].height
                if( -top <= height && top <= 0){
                    navElements.forEach( _navItem =>{
                         _navItem.classList.remove("nav-active")
                      })
                      navElements[index].classList.add("nav-active")
                }
            })
        }
    }
    scrollChangeNav(".nav li","[id^=section]")

</script>

</body>
</html>